<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col class="logo fontS_26">
        <img :src="SYSLOGO" alt="">
      </el-col>
      <el-col>
        管理系统
      </el-col>
      <el-col class="account">
        <el-dropdown trigger="hover" class="account-content">
          <span class="el-dropdown-link userinfo-inner"><img src="../assets/image/tou.jpg" /></span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item>{{username}}</el-dropdown-item>
            <!--<el-dropdown-item divided @click.native="editPwd">修改密码</el-dropdown-item>-->
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <!-- 侧边栏 -->
      <el-col class="leftNav">
        <el-menu :default-active="activeIndex" unique-opened router>
          <!--<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">-->
            <!--<el-submenu :index="index+''" v-if="!item.leaf">-->
              <!--<template slot="title">-->
                <!--<i :class="item.iconCls"></i>-->
                <!--<span v-show="item.name=='业务管理'" v-if="$store.state.routes.routes.ywKouXi || $store.state.routes.routes.ywFeilv">{{item.name}}</span>-->
                <!--<span v-show="item.name=='方案管理'" v-if="$store.state.routes.routes.faAll || $store.state.routes.routes.faTimed">{{item.name}}</span>-->
                <!--<span v-show="item.name=='财务管理'" v-if="$store.state.routes.routes.cwRecharge || $store.state.routes.routes.cwWithDraw|| $store.state.routes.routes.cwWithdrawRecord|| $store.state.routes.routes.cwCount">{{item.name}}</span>-->
                <!--<span v-if="$store.state.routes.routes.xtAdmin || $store.state.routes.routes.xtAccess|| $store.state.routes.routes.xtRole|| $store.state.routes.routes.xtLog">{{item.name=='系统管理'?'':''}}</span>-->
              <!--</template>-->
              <!--<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">-->
                <!--<span v-show="child.name=='扣息记录'" v-if="$store.state.routes.routes.ywKouXi">{{child.name}}</span>-->
                <!--<span v-show="child.name=='费率记录'" v-if="$store.state.routes.routes.ywFeilv">{{child.name}}</span>-->
                <!--<span v-show="child.name=='方案列表'" v-if="$store.state.routes.routes.faAll">方案列表</span>-->
                <!--<span v-show="child.name==='即将到期方案'" v-if="$store.state.routes.routes.faTimed">{{child.name}}</span>-->
                <!--<span v-show="child.name=='充值记录'" v-if="$store.state.routes.routes.cwRecharge">{{child.name}}</span>-->
                <!--<span v-show="child.name=='提现申请'" v-if="$store.state.routes.routes.cwWithDraw">{{child.name}}</span>-->
                <!--<span v-show="child.name=='提现记录'" v-if="$store.state.routes.routes.cwWithdrawRecord">{{child.name}}</span>-->
                <!--<span v-show="child.name=='财务统计'" v-if="$store.state.routes.routes.cwCount">{{child.name}}</span>-->
                <!--<span v-show="child.name=='管理员账号'" v-if="$store.state.routes.routes.xtAdmin">{{child.name}}</span>-->
                <!--<span v-show="child.name=='权限管理'" v-if="$store.state.routes.routes.xtAccess">{{child.name}}</span>-->
                <!--<span v-show="child.name=='角色管理'" v-if="$store.state.routes.routes.xtRole">{{child.name}}</span>-->
                <!--<span v-show="child.name=='日志管理'" v-if="$store.state.routes.routes.xtLog">{{child.name}}</span>-->
              <!--</el-menu-item>-->
            <!--</el-submenu>-->
            <!--<el-menu-item v-if="item.children.length == 1&& item.name==''&& item.leaf" :index="item.children[0].path">-->
              <!--<i :class="item.iconCls"></i>-->
              <!--<span v-show="item.children[0].name=='用户管理'" v-if="$store.state.routes.routes.yh">{{item.children[0].name}}</span>-->
            <!--</el-menu-item>-->
          <!--</template>-->
          <el-menu-item index="/welcome" >
            <span slot="title">&emsp;&nbsp;首页</span>
          </el-menu-item>
          <el-submenu index="1" v-if="$store.state.routes.routes.ywKouXi || $store.state.routes.routes.ywFeilv">
          <template slot="title">&emsp;&nbsp;业务管理</template>
          <el-menu-item index="/yewu_Charges" v-if="$store.state.routes.routes.ywKouXi">扣息记录</el-menu-item>
          <el-menu-item index="/yewu_feeConfig" v-if="$store.state.routes.routes.ywFeilv">费用配置</el-menu-item>
          </el-submenu>

          <el-menu-item index="/userConfig" v-if="$store.state.routes.routes.yh">
          <span slot="title">&emsp;&nbsp;用户管理</span>
          </el-menu-item>

          <el-submenu index="2" v-if="$store.state.routes.routes.faAll || $store.state.routes.routes.faTimed">
          <template slot="title">&emsp;&nbsp;方案管理</template>
          <el-menu-item index="/fa_list" v-if="$store.state.routes.routes.faAll">方案列表</el-menu-item>
            <el-menu-item index="/fa_settle" v-if="$store.state.routes.routes.faSettle">申请结算方案</el-menu-item>
          <el-menu-item index="/fa_timer" v-if="$store.state.routes.routes.faTimed">即将到期方案</el-menu-item>
          </el-submenu>

          <el-submenu index="3" v-if="$store.state.routes.routes.cwRecharge || $store.state.routes.routes.cwWithDraw|| $store.state.routes.routes.cwWithdrawRecord|| $store.state.routes.routes.cwCount">
          <template slot="title">&emsp;&nbsp;财务管理</template>
          <el-menu-item index="/cw_recharge" v-if="$store.state.routes.routes.cwRecharge">充值记录</el-menu-item>
          <el-menu-item index="/cw_withdraw" v-if="$store.state.routes.routes.cwWithDraw">提现申请</el-menu-item>
          <el-menu-item index="/cw_withdrawRecord" v-if="$store.state.routes.routes.cwWithdrawRecord">提现记录</el-menu-item>
          <el-menu-item index="/cw_count" v-if="$store.state.routes.routes.cwCount">财务统计</el-menu-item>
          </el-submenu>

          <el-submenu index="4" v-if="$store.state.routes.routes.xtAdmin || $store.state.routes.routes.xtAccess|| $store.state.routes.routes.xtRole|| $store.state.routes.routes.xtLog">
          <template slot="title">&emsp;&nbsp;系统管理</template>
          <el-menu-item index="/xitong_admin" v-if="$store.state.routes.routes.xtAdmin">管理员账号</el-menu-item>
          <el-menu-item index="/xitong_access" v-if="$store.state.routes.routes.xtAccess">权限管理</el-menu-item>
          <el-menu-item index="/xitong_role" v-if="$store.state.routes.routes.xtRole">角色管理</el-menu-item>
          <el-menu-item index="/xitong_log" v-if="$store.state.routes.routes.xtLog">日志管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 内容 -->
      <el-col class="content">
        <div class="tag" style="display: none">
          <el-tag v-if="item.path!='/login'" type="warning" :closable="isCloseTags" v-for="(item,index) in tags" :key="index" :paths="item.path" @close="closeTag($event)">
            <span @click="toOther(item.path)" v-show="$route.path==item.path" class="shanxian">{{item.name}}</span>
            <!--<span @click="toOther(item.path)"  style="color: #E6A23C">{{item.name}}</span>-->
          </el-tag>
          <el-button size="mini" type="danger" @click="closeOther" v-if="tags.length>1">关闭其它</el-button>
        </div>
        <router-view style="height: auto"></router-view>
      </el-col>
    </el-col>

    <!-- 修改密码窗 -->
    <el-dialog title="修改密码" :visible.sync="editPwdFormVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="editPwdForm" ref="editPwdForm" status-icon label-width="100px" :rules="editPwdFormRules" style="text-align:left">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-col :span="22">
            <el-input v-model="editPwdForm.oldPwd" placeholder="请输入旧密码"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-col :span="22">
            <el-input type="password" v-model="editPwdForm.newPwd" placeholder="请输入新密码"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPwd">
          <el-col :span="22">
            <el-input type="password"  v-model="editPwdForm.reNewPwd" placeholder="请确认新密码"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelSubmit('editPwdForm')">取 消</el-button>
        <el-button type="primary" @click.native="editPwdSubmit('editPwdForm')" :loading="editPwdLoading">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  //import store from store
  export default {
    name: "",
    data() {
      var checkOldPwd = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("旧密码都不填？"));
        } else {
          callback();
        }
      };
      var checkNewPwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("新密码也不填？"));
        } else {
          if (value.length < 5) {
            return callback(new Error("就不能长一点？(6到20个之间)"));
          } else if (value.length > 10) {
            return callback(new Error("就不能短一点？(6到20个之间)"));
          } else {
            var reg = /^[A-Za-z0-9]{6,20}$/;
            if (!reg.test(value)) {
              return callback(new Error("我是有原则的！(6-20位字母数字组合)"));
            }
          }
          callback();
        }
      };
      var checkReNewPwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("搞事情啊你！不能为空"));
        } else if (value !== this.editPwdForm.newPwd) {
          callback(new Error("你有2个新密码？"));
        } else {
          callback();
        }
      };

      return {
        SYSLOGO: "",
        nodes: this.$router.options.routes,
        editPwdFormVisible: false,
        editPwdLoading: false,
        username: "",
        isCloseTags:false,
        editPwdForm: {
          oldPwd: "",
          newPwd: "",
          reNewPwd: ""
        },
        editPwdFormRules: {
          oldPwd: [
            {
              validator: checkOldPwd,
              trigger: "blur"
            }
          ],
          newPwd: [
            {
              validator: checkNewPwd,
              trigger: "blur"
            }
          ],
          reNewPwd: [
            {
              validator: checkReNewPwd,
              trigger: "blur"
            }
          ]
        },
        tags:[],
      };

    },
    created() {
//      console.log(this.$route)
//      console.log(this.$store.state.routes.routes)
//      this.tags = this.$store.state.user.tags
      this.tags.push({name:this.$route.query.name,path:this.$route.query.path})
      this.SYSLOGO = process.env.SYSLOGO;
      this.username = window.sessionStorage.getItem("username");
      // alert(this.)
      //这里没有直接使用this.$router.options.routes，是因为addRoute的路由规则，在这里this.$router.options.routes获取不到
      //有兴趣的可以看一下源码，是为什么获取不到，但是却又有规则了
      //另外在开发的时候，可能由于是热部署，也会不断重复的给nodes添加元素，造成导航条有重复的，简单解决，可以设置一个开关
//      let isLoadNodes = sessionStorage.getItem("isLoadNodes");
//      if (!isLoadNodes) {
//        let data = JSON.parse(window.sessionStorage.getItem("user"));
//        this.nodes.push(...data);
//        sessionStorage.setItem("isLoadNodes", "true");
//      }
    },
    updated(){
//      this.tags = this.$store.state.user.tags

      this.$store.state.user.tags.length<=1 ? this.isCloseTags = false :  this.isCloseTags = true
    },
    computed: {
      //高亮侧边栏
      activeIndex () {
        if(this.$route.matched[1].path.indexOf('Detail') > -1 ){
          return '/'+this.$route.query.from
        }else{
          return '/'+this.$route.matched[1].path.split('/')[1]
        }
      }
    },
    methods: {
      closeTag(event){
        var current = event.srcElement.parentNode.getAttribute('paths')
        for(var key in this.$store.state.user.tags){
          if(this.$store.state.user.tags[key].path == current){
            this.$store.state.user.tags.splice(key,1)

          }
        }

        this.$router.push(this.$store.state.user.tags[this.$store.state.user.tags.length-1].path.toString())
        // //console.log(this.$store.state.user.tags[this.$store.state.user.tags-1])
      },
      toOther(data){
        this.$router.push(data)
      },
      closeOther(){
        this.tags = this.$store.state.user.tags = [];
        //console.log(this.$store.state.user.tags);
        this.$store.state.user.tags.push({"name":this.$route.name,"path":this.$route.path})
      },
      editPwd() {
        this.editPwdFormVisible = true;
      },
      cancelSubmit(editPwdForm) {
        this.editPwdFormVisible = false;
        this.$refs[editPwdForm].resetFields();
      },
      editPwdSubmit(fn) {
        this.$refs[fn].validate(valid => {
          if (valid) {
            this.editPwdLoading = true;
            this.$http('user/user_modify_password',{data:{old: this.editPwdForm.oldPwd, new: this.editPwdForm.newPwd}})
              .then(resp => {
                this.editPwdLoading = false;
                if (resp.error_code == 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success"
                  });
                  window.sessionStorage.setItem("isShowPwd", false);
                } else {
                  this.$notify({
                    title: "错误",
                    message: resp.error_msg,
                    type: "error"
                  });
                }
              });
            this.editPwdFormVisible = false;
            this.$refs[fn].resetFields();
          }
        });
      },
      logout: function() {
        var _this = this;
        this.$confirm("确认退出吗?", "提示", {})
          .then(() => {
            this.$http('noAuth/sysloginOut.do').then(resp=>{
              if(resp.code==1){
                _this.$router.push("/login");
                window.sessionStorage.removeItem("title")
                window.sessionStorage.removeItem("name")
                window.sessionStorage.removeItem("isShowPwd")
                window.sessionStorage.removeItem("routeConst")
              }
            })
          })
          .catch(() => {});
      },
    },
    mounted(){


    }
  };
</script>

<style scoped>
  @import "../assets/css/default.css";
  .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .header {
    width: 100%;
    height: 60px;
    background: #409eff;
    line-height: 60px;
    color: white;
    /*display: flex;*/
  }

  .header .logo {
    width:200px;
  }

  /*.heaer .middle {*/
  /*flex: 1;*/
  /*}*/

  .header .account {
    width:300px;
    float: right;
  }

  .header .account-content {
    width: 120px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 5px;
  }

  .header img:hover {
    cursor: pointer;
  }

  .main {
    min-height: calc(100% - 60px);
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    background: white;
  }

  .main .leftNav {
    width: 200px;
    background: rgb(238, 241, 246);
  }

  .main .leftNav ul li {
    text-align: left;
    /* background: rgb(238, 241, 246) */
  }
  .main .leftNav ul>li{
    background: rgb(238, 241, 246);
  }
  .main .content {
    /*flex: 1;*/
    background: white;
    height:100%;
    /* padding:20px */
  }
  /*.el-dialog__wrapper,.el-message-box__wrapper{*/
  /*z-index: 20000!important;*/
  /*}*/
  /*.el-dropdown-menu.el-popper{*/
  /*z-index:20000!important;*/
  /*}*/
  .el-menu-item {
    vertical-align: initial;
    min-width:100px !important;
  }
  .content .tag{
    min-height: 40px;
    max-height: 120px;
    line-height: 40px;
    text-align: left;
    padding: 0px 8px;

  }
  .el-tag{
    margin-left:5px;
    display:inline-block;
  }
  .el-tag:hover{
    cursor: pointer;
  }
  .shanxian{
    animation:shanxian 3s infinite linear
  }
  @keyframes shanxian {
    0%{
      color: white;
    }
    50%{
      color: #c57a09;
    }
    100%{
      color:white
    }
  }
</style>


